<script setup>
import {ref} from 'vue'

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const tableData = [
{
    date: 'XS38948',
    name: '18933110099',
    address: '线上活动',
    a1: '1',
    a2: 0,
    a3: '2016-09-21 08:50:08',
  },
  {
    date: 'XS38948',
    name: '18933110066',
    address: '线上活动',
    a1: '2',
    a2: 1,
    a3: '2016-09-22 08:50:08',
  },
  {
    date: 'XS38948',
    name: '18933110099',
    address: '线上活动',
    a1: '1',
    a2: 0,
    a3: '2016-09-21 08:50:08',
  },
  {
    date: 'XS38948',
    name: '18933110066',
    address: '线上活动',
    a1: '2',
    a2: 1,
    a3: '2016-09-22 08:50:08',
  },
  {
    date: 'XS38948',
    name: '18933110099',
    address: '线上活动',
    a1: '1',
    a2: 0,
    a3: '2016-09-21 08:50:08',
  },
  {
    date: 'XS38948',
    name: '18933110066',
    address: '线上活动',
    a1: '2',
    a2: 1,
    a3: '2016-09-22 08:50:08',
  },
]
</script>
<template>
  <div class="container-role">
    <div class="role-form">
      <el-form label-position="top">
        <el-row>
          <el-col :span="6">
            <el-form-item label="角色名称">
              <el-input placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="权限字符">
              <el-input placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select placeholder="请选择">
                <el-option label="SVPI" value="SVPI" />
                <el-option label="VIP" value="VIP" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <div  class="roleForm">
          <span><el-space wrap>
            <el-button  type="primary" round>搜索</el-button> <el-button round>重置</el-button>
          </el-space></span>
        </div>
      </el-row>
    </div>
    <div class="role-center">
      <span>已选<i style="color: red;margin: 0 5px;"> {{ multipleSelection.length }} </i>项</span>
      <span>
        <el-space wrap>
          <el-button  type="primary" round>新增</el-button> <el-button round>移出</el-button><el-button round>导出</el-button>
        </el-space>
      </span>
    </div>
    <div>
      <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="角色编号" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="角色名称" width="120" />
    <el-table-column property="address" label="权限字符" show-overflow-tooltip />
    <el-table-column property="a1" label="显示顺序" show-overflow-tooltip >
      <template v-slot="scope">
        <span>{{ scope.$index+1 }}</span>
      </template>
    </el-table-column>
    <el-table-column property="a2" label="状态" show-overflow-tooltip >
      <template v-slot="{row}">
        <el-switch v-model="row.a2" />
      </template>
    </el-table-column>
    <el-table-column property="a3" label="创建时间" show-overflow-tooltip />
    <el-table-column>
      <el-space wrap>
        <el-button type="success" link>修改</el-button>
        <el-button type="success" link>数据权限</el-button>
        <el-button type="danger" link>删除</el-button>
      </el-space>
    </el-table-column>
  </el-table>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.roleForm{
  padding: 0 20px;
  text-align: right;
  width: 100%;
  span{
    display: inline-block;
    width: 200px;
    
  }
}
.container-role{
  background-color: #fff;
  .role-form{
    padding: 20px;
  }
}
.role-center{
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background-color: rgb(249,249,249);
}
</style>